<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName">
          <el-tab-pane label="登录账户设置" name="first">
            <el-form
              ref="accountFormRef"
              :model="accountForm"
              :rules="accountRule"
              label-width="80px"
            >
              <el-form-item label="姓名" prop="username">
                <el-input v-model="accountForm.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password2">
                <el-input v-model="accountForm.password2" type="password"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="updateAccount">更新</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="个人详情" name="second">
            <user-info />
          </el-tab-pane>
          <el-tab-pane label="岗位信息" name="third">
            <job-info />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getUserDetailById } from '@/api/user'
import { updateBaseInfo } from '@/api/employee'
import { mapGetters } from 'vuex'
import userInfo from './components/userInfo.vue'
import jobInfo from './components/jobInfo.vue'
export default {
  components: {
      userInfo,
      jobInfo
  },
  data() {
    return {
        activeName: 'first',
        accountForm: {
            username: '',
            password: '',
            password2: ''
        },
        accountRule: {
            username: [{ required: true, trigger: blur, message: '请输入用户名' }],
            password2: [{ required: true, trigger: blur, message: '请输入密码' },
            { min: 6, max: 18, message: '密码长度须在6-18位' }]
        }
    };
  },
  computed: {
      ...mapGetters(['id'])
  },
  created() {
    this.getInfo()
  },
  methods: {
    async updateAccount() {
        try {
            await this.$refs.accountFormRef.validate()
            console.log(1);
            await updateBaseInfo({ id: this.id, username: this.accountForm.username, password: this.accountForm.password2 })
            this.$message.success('更新成功')
        } catch (error) {
            console.log(error);
        }
    },
    async getInfo() {
        const { username, password } = await getUserDetailById(this.id)
        this.accountForm.username = username
        this.accountForm.password = password
    }
  }
};
</script>
<style>
.el-form {
    width: 40%
}
</style>
